// 常用按钮配色
@mixin btn-info {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
  &:hover {
    color: #fff;
    background-color: #138496;
    border-color: #117a8b;
  }
  &:focus {
    color: #fff;
    background-color: #138496;
    border-color: #117a8b;
    box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
  }
  &:disabled {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
  }
}
// 常用按钮透明版
@mixin btn-outline-info {
  color: #17a2b8;
  border-color: #17a2b8;
  &:hover {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
  }
  &:focus {
    box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
  }
  &:disabled {
    color: #17a2b8;
    background-color: transparent;
  }
}
// 链接配色
@mixin link-info {
  color: #17a2b8 !important;
  &:hover {
    color: #0f6674 !important;
  }
}
// 文字配色
$text-info: #17a2b8;

.info-color {
  // 顶部导航栏配色
  header .navbar {
    background-color: $text-info !important;
    .navbar-brand {
      color: #fff;
    }
    .navbar-brand:hover,.navbar-brand:focus {
      color: #fff;
    }
    .navbar-nav .nav-link {
      color: rgba(255, 255, 255, 0.5);
    }
    .navbar-nav .nav-link:hover,.navbar-nav .nav-link:focus {
      color: rgba(255, 255, 255, 0.75);
    }
    .navbar-nav .nav-link.disabled {
      color: rgba(255, 255, 255, 0.25);
    }
    .navbar-nav .show > .nav-link,
    .navbar-nav .active > .nav-link,
    .navbar-nav .nav-link.show,
    .navbar-nav .nav-link.active {
      color: #fff;
    }
    .navbar-toggler {
      color: rgba(255, 255, 255, 0.5);
      border-color: rgba(255, 255, 255, 0.1);
    }
    .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
    .navbar-text {
      color: rgba(255, 255, 255, 0.5);
    }
    .navbar-text a {
      color: #fff;
    }
    .navbar-text a:hover,.navbar-text a:focus {
      color: #fff;
    }
  }

  // 文章列表配色
  .article-list .post, .archives-list .post {
    .article-info {
      i,span {
        color: $text-info;
      }
      a {
        @include link-info;
      }
    }
  }

  // 分页导航区配色
  .pagination-nav ul {
    li a {
      color: $text-info;
    }
    .active a {
      color: #ffffff;
      background-color: $text-info;
      border: none;
    }
  }

  // 侧边栏配色
  .sidebar {
    // 通用列表链接、最新评论链接、博客信息区域链接、日历链接配色
    section ul > li > a,.latest-comment a,.user-name,.calendar a {
      @include link-info;
    }
    // 列表的徽章配色
    section ul li .badge {
      background-color: $text-info;
      color: #ffffff;
    }
    // 标签云配色
    .tag-cloud a {
      border: 1px solid $text-info;
      color: $text-info;
      &:hover {
        background-color: $text-info;
        color: #ffffff;
      }
      &:focus {
        background-color: $text-info;
        color: #ffffff;
      }
    }
    // 搜索组件配色
    .search {
      button {
        @include btn-info;
      }
    }
  }

  // 面包屑导航配色
  .breadcrumb-nav a {
    @include link-info;
  }

  // 文章页配色
  .content-area {
    // 文章信息区域
    .article-info .info {
      span,i {
        color: $text-info;
      }
      a {
        @include link-info;
      }
    }
    // 文章内容区域
    .post-content {
      // 链接
      a {
        @include link-info;
      }
    }
    // 分享和点赞区域
    .agree-and-share {
      button {
        @include btn-outline-info;
      }
    }
    // 上一篇文章和下一篇文章的导航区域
    .post-navigation a {
      @include link-info;
    }
  }

  // 评论区配色
  #comments {
    // 发表评论区
    #comment-form {
      // 打开表情面板按钮
      #show-emoji-btn {
        @include btn-outline-info;
      }
      // 表情面板
      #emoji-classification {
        button[aria-checked="true"] {
          background-color: $text-info;
        }
      }
      // 当前登录用户链接
      .comment-user a {
        @include link-info;
      }
      // 提交评论按钮
      .submit {
        @include btn-info;
      }
    }
    // 评论列表区
    .comment-box {
      // 评论者昵称
      .comment-info {
        .author a {
          @include link-info;
        }
      }
      // 回复链接
      .comment-reply a {
        border: 1px solid $text-info;
        color: $text-info;
        &:hover {
          background-color: $text-info;
          color: #ffffff;
        }
      }
      // 评论内容区的链接
      .comment-content a {
        @include link-info;
      }
    }
  }

  // 返回顶部按钮
  .to-top {
    color: $text-info;
  }
}